<template>
    <div class="box">
        <header class="header">
            <div class="w">
              <p> <van-icon name="arrow-left" size="20" @click="$router.go(-1)"  /></p>
               <p>一公里内商家</p>
               <p> <van-icon name="location-o" /> 凤凰城</p>
            </div>
              <van-tabs v-model:active="active">
          <van-tab title="全部"></van-tab>
          <van-tab title="超市"></van-tab>
          <van-tab title="便利店"></van-tab>
          <van-tab title="药店"></van-tab>
        </van-tabs>
        </header>
        <main class="content">
             <ul class="list">
          <li v-for="item in list" :key="item.id">
            <div>
              <van-image lazy-load :src="item.image" />
            </div>
            <div>
              <p class="van-multi-ellipsis--l2">{{ item.title }}</p>
              <p>￥{{ item.price }}</p>
            </div>
          </li>
        </ul>
     
        </main>
    </div>

     
</template>

<script setup>
import { ref, onMounted } from "vue";
const active = ref(0);
const list = ref([]);
const pagination = ref(1);
  const loading = ref(false);
  const isLoading = ref(false);
    const finished = ref(false);
import request from "@/utils/request";
onMounted(() => {
  request
    .get("/list", {
      params: {
        pagination: 1,
        pageNum: 10,
      },
    }).then((res) => {
      if (res.data.code == 200) {
        list.value = res.data.data;
      }
    });
});

const onLoad =()=>{
     loading.value=true 
     request.get('/list',{
        params:{
           pagination:pagination.value,
           pageNum:10
        }
     }).then((res) => {
      if (res.data.code == 200) {
        list.value = [...list.value,...res.data.data]
      }
      loading.value=false
      pagination.value++
      if(list.value.length >= res.data.total){
        finished.value=true
      }
    });
}

const onRefresh=()=>{
   setTimeout(() => {
      
        isLoading.value = false;
      
      }, 1000);
}
</script>

<style lang="scss" scoped>
.list {
  column-count: 2;
  column-gap: 10px;
  li {
    break-inside: avoid;
    img {
      width: 100%;
    }
  }
}
.w{
    display: flex;
    justify-content: space-between;
}
</style>
